<template>
  <div class="html1_14">
      <h1>1.14  HTML5 文件处理</h1>
      <div class="html1_14_1">
        <h2>1.14.1 File API</h2>
        <p>
         在很多时候，Web应用需要访问用户本地文件，例如上传资料、展示照片等。HTML5提供了File API来帮助我们在Web页面中访问本地文件，它可以在Web应用中展现文件，或者选择并读取文件。当使用Google图像搜索时，你可以把一幅图片从电脑桌面拖放到Google页面的输入框里，这幅图像将会被自动上传并迅速展示出图片的搜索结果来（仅限于支持File API的现代浏览器，例如Chrome），相当便捷，这就是使用HTML5的File API实现的。
        </p>
      </div>
      <div class="html1_14_2">
        <h2>1.14.2 FileList接口</h2>
        <p>
          <pre>
            它包含一组File对象，所以我们一般通过它来获取文件。有两种方式可以得到FileList对象：第一种是通过&lt;input type="file">标签，
例如var fileList =document.getElementById('input-file').files可以获取选择的所有文件对象
          </pre>
        </p>
      </div>
      <div class="html1_14_3">
        <h2>1.14.3 FileReader接口</h2>
        <p>它提供了方法来读取文件，还提供了获取读取数据的事件模型。</p>
        <p class="tab">表2-15  FileReader接口的方法</p>
        <table border="1px">
          <tr>
            <th>方法名</th>
            <th>参数</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>readAsBinaryString</td>
            <td>file</td>
            <td>将文件读取为二进制编码</td>
          </tr>
          <tr>
            <td>readAsText</td>
            <td>file,[encoding]</td>
            <td>将文件读取为文本</td>
          </tr>
          <tr>
            <td>readAsDataURL</td>
            <td>file</td>
            <td>将文件读取为DataURL</td>
          </tr>
          <tr>
            <td>abort</td>
            <td>(none)</td>
            <td>终端读取操作</td>
          </tr>
        </table>
        <p class="tab">表2-15  FileReader接口的事件</p>
        <table border="1px">
          <tr>
            <th>事件</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>onabort</td>
            <td>中断</td>
          </tr>
          <tr>
            <td>onerror</td>
            <td>出错</td>
          </tr>
          <tr>
            <td>onloadstart</td>
            <td>开始</td>
          </tr>
          <tr>
            <td>onprogress</td>
            <td>正在读取</td>
          </tr>
          <tr>
            <td>onload</td>
            <td>成功读取</td>
          </tr>
          <tr>
            <td>onloadend</td>
            <td>读取完成，无论成功失败</td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>